<script setup>
import { reactive } from 'vue'
import Mytable from "./components/Mytable.vue";
const goodsList = reactive([
  {
    id: 1,
    goods_name: '夏季专柜同款女鞋',
    goods_price: 298,
    tags: ['舒适', '透气'],
    inputVisible: false,
    inputValue: ''
  },
  {
    id: 2,
    goods_name: '冬季保暖女士休闲雪地靴 舒适加绒防水短靴 防滑棉鞋',
    goods_price: 89,
    tags: ['保暖', '防滑'],
    inputVisible: false,
    inputValue: ''
  },
  {
    id: 3,
    goods_name: '秋冬新款女士毛衣 套头宽松针织衫 简约上衣',
    goods_price: 199,
    tags: ['秋冬', '毛衣'],
    inputVisible: false,
    inputValue: ''
  },
  {
    id: 4,
    goods_name: '2023春秋装新款大码女装 衬衫 上衣',
    goods_price: 19,
    tags: ['雪纺衫', '打底'],
    inputVisible: false,
    inputValue: ''
  },
  {
    id: 5,
    goods_name: '长款长袖圆领女士毛衣 2022秋装新款假两件连衣裙',
    goods_price: 178,
    tags: ['圆领', '连衣裙'],
    inputVisible: false,
    inputValue: ''
  }
])

const removeGoods = (id) => {
  const index = goodsList.findIndex(item => item.id === id)
  if (index !== -1) {
    const item = goodsList[index]
    item._deleting = true

    setTimeout(() => {
      goodsList.splice(index, 1)
    }, 400)
  }
}

const addTag = (item, tag) => {
  const trimmedTag = tag.trim()
  if (trimmedTag && !item.tags.includes(trimmedTag)) {
    setTimeout(() => {
      item.tags.push(trimmedTag)
    }, 50)
  }

  setTimeout(() => {
    item.inputVisible = false
    item.inputValue = ''
  }, 10)
}

const showInput = (item) => {
  setTimeout(() => {
    item.inputVisible = true
  }, 10)
}
</script>

<template>
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    <h2 class="text-3xl font-bold text-gray-800 mb-8 pb-2 border-b border-gray-200">商品管理</h2>
    <Mytable
      :goodsList="goodsList"
      @remove-goods="removeGoods"
      @add-tag="addTag"
      @show-input="showInput"
    ></Mytable>
  </div>
</template>

<style scoped>
</style>
